<template>
  <div
    :style="{height: height === 'auto' ? '200px' : height + 'px'}"
    style="border-bottom: 2px solid rgb(255,255,255)"
  >
    <div style="
    height:52px;border-left:2px
    solid
    #006F4DFF;
    color:#fff;"
  >
    <div style="height:40%; fontSize:14px; fontWeight:500; display:flex; align-items:center;  padding-left:8px;
              ">{{defaultConfig.numberName}}</div>
    <div style="height:60%; display:flex; align-items:center; padding-left:8px; justify-content: space-between;">
      <div style="fontSize:28px">{{data.number}}</div>
      <div style="width: 100px; height:100%; background:#419c81ff;display:flex; align-items:center; justify-content: center; border-radius:4px;font-size:14px;
              ">
        <span style="display:flex;justify-content: center;align-items:center;">{{defaultConfig.rateName}}</span><span style="margin-left:3px;font-size: 24px;">{{data.rate}}</span>
      </div>
    </div>
  </div>
  <div
    style="height:calc(100% - 52px); width:100%;"
    ref="myChart"
  >
  </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      height: 200,
      data: {
        rate: 180, // 完成率
        number: 290, //工单个数
        xData: ["场馆1", "场馆2", "场馆3", "场馆4"],
        yData: [20, 132, 81, 134],
      }, // 得到的%
      defaultConfig: {
        rateName: "完成率",
        numberName: "场馆保障工单个数/完成率",
      },
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      var myChart = echarts.init(this.$refs.myChart);
      var option = {
        // 标题
        title: {
          show: this.showName,
          text: this.title,
        },
        color: ["#629d89"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          show: true,
          left: "-14%",
          right: "0%",
          top: "4%",
          bottom: "2%",
          containLabel: true,
          // backgroundColor: "rgba(211, 218, 224, 0.2)",
          borderColor: "transparent",
        },
        xAxis: [
          {
            type: "category",
            data: this.data.xData,
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgb(255, 255, 255,0.4)", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show: false,
          },
        ],
        series: [
          {
            type: "line",
            stack: "总量",
            symbolSize: 2,
            data: this.data.yData,
            smooth: true,
            lineStyle: {
              color: "#419C81",
              width: 3,
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#419C81",
                  width: 2,
                },
              },
              // 鼠标经过时：
              emphasis: {
                color: "#419C81",
                borderColor: "#fff",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>